<template style="background-color: #f6f6f6">

  <el-card class="box-card" >

    <template #header>
      <div class="card-header">
        <span>信息管理</span>
        <span style="float: right;">
            <el-input
                style="float: left;width: 200px;"
                v-model="search"
                size="default"
                placeholder="输入关键字搜索"/>
            <el-select v-model="currentCollege"
                       :disabled="false"
                       style="width: 150px;"
                       @change="initTable"
            >
              <el-option
                  v-for="college in collegeList"
                  :key="college"
                  :label="college"
                  :value="college"/>
            </el-select>
            <el-button @click="initUniversity"><el-icon><Refresh /></el-icon></el-button>
            <el-button type="primary" plain @click="openAddDialog()">创建学生账号</el-button>
          </span>
      </div>
    </template>

    <div style="height: 90%">
      <el-table v-loading="tableLoading"
                row-key="id"
                :data="filterData"
                style="width: 100%; height:90%"
                border stripe >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column prop="stuId" label="学号" width="150" align="center"/>
        <el-table-column prop="name" label="姓名" width="100" align="center"/>
        <el-table-column prop="college" label="院系" align="center"/>
        <el-table-column prop="major" label="专业" width="100" align="center"/>
        <el-table-column prop="stuClass" label="班级" width="100" align="center"/>
        <el-table-column prop="phone" label="电话" width="150" align="center"/>
        <el-table-column prop="enrollmentYear" label="入学年份" width="150" align="center"/>
        <el-table-column prop="graduationYear" label="毕业年份" width="150" align="center"/>
        <el-table-column fixed="right" label="操作" width="190" align="center">
          <template #default="scope">
            <el-button size="small" :type="scope.row.enable===1 ? 'primary':'danger'" @click="disableAccount(scope.row.id,scope.row.enable)">{{ scope.row.enable===1 ? '启用账号':'禁用账号' }}</el-button>
            <el-button size="small" type="primary" @click="resetPassword(scope.row.id)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
          v-model="addDialogVisible"
          title="创建学生账号"
          width="35%"
          style="text-align: center"
          align-center>
        <el-form label-width="70px">
          <el-form-item label="目标高校" prop="file" style="width: 100%;">
            <el-tag>
              {{uniName}}
            </el-tag>
          </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="批量创建" name="batch">
            <el-form label-width="100px">
              <el-form-item label="素材文件" prop="file" style="width: 450px;">
                <el-upload
                    class="upload_div"
                    :auto-upload="false"
                    :on-change="change"
                    :multiple="false"
                    :show-file-list="false"
                    drag
                >
                  <el-icon style="width: 50px;"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="单例创建" name="single">
            <el-form :model="form" label-width="100px">
              <el-form-item label="姓名">
                <el-input v-model="form.name" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="学号">
                <el-input v-model="form.stuId" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="院系">
                <el-input v-model="form.college" style="width: 450px;"/>
              </el-form-item>
              <el-form-item label="专业">
                <el-input v-model="form.major" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="班级">
                <el-input v-model="form.stuClass" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="form.phone" style="width: 450px;" />
              </el-form-item>
              <el-form-item label="入学年份">
                <el-date-picker
                    v-model="form.enrollmentYear"
                    type="year"
                    placeholder="入学年份"
                />
              </el-form-item>
              <el-form-item label="毕业年份">
                <el-date-picker
                    v-model="form.graduationYear"
                    type="year"
                    placeholder="毕业年份"
                    :disabled-date="disabledYear"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

        <template #footer>
              <span class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取消</el-button>
                  <el-button
                      v-if="activeName==='batch'"
                      v-loading.fullscreen.lock="uploadLoading"
                      type="primary" @click="upload">
                    确认
                  </el-button>
                  <el-button
                      v-if="activeName==='single'"
                      v-loading.fullscreen.lock="uploadLoading"
                      type="primary" @click="create">
                    确认
                  </el-button>
              </span>
        </template>
      </el-dialog>

      <el-dialog
          v-model="importDialogVisible"
          title="导入学生信息"
          width="55%"
          style="text-align: center"
          align-center>
        <el-scrollbar height="450px">
          <el-table v-loading="tableLoading"
                    row-key="id"
                    :data="studentDataFilter"
                    style="width: 100%; height:90%"
                    border stripe >
            <el-table-column prop="stuId" label="学号" width="150" align="center"/>
            <el-table-column prop="name" label="姓名" width="100" align="center"/>
            <el-table-column prop="college" label="院系" align="center"/>
            <el-table-column prop="major" label="专业" width="100" align="center"/>
            <el-table-column prop="stuClass" label="班级" width="100" align="center"/>
            <el-table-column prop="phone" label="电话" width="150" align="center"/>
            <el-table-column prop="enrollmentYear" label="入学年份" width="150" align="center"/>
            <el-table-column prop="graduationYear" label="毕业年份" width="150" align="center"/>
          </el-table>
        </el-scrollbar>

        <el-pagination
            :small="true"
            :disabled="false"
            :background="true"
            layout="prev, pager, next"
            @change="shift"
            v-model:current-page="currentPage"
            :total="importData.length"
        />
        <template #footer>
              <span class="dialog-footer">
                  <el-button @click="importDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="importStudentData">
                    导入
                  </el-button>
              </span>
        </template>
      </el-dialog>

      <el-pagination
          :small="true"
          :disabled="false"
          :background="true"
          layout="prev, pager, next"
          @change="initTable"
          v-model:current-page="current"
          :page-count="pageCount"
      />

    </div>

  </el-card>

</template>

<script >

import moment from 'moment';
import { ElMessage } from 'element-plus'
import {Edit, Plus, Refresh} from "@element-plus/icons-vue";
import university from "@/view/university/index.vue";
export default {
  components: {Plus, Edit, Refresh},
  data(){
    return{
      file:'',
      studentData:'',
      extension:'',
      current:1,
      currentPage:1,
      pageCount:0,
      dataId:'',
      importData:[],
      tableData:[],
      uniName: '',
      currentUniId: '',
      collegeList:[],
      currentCollege:'',
      tempUniId:'',
      tableLoading:false,
      uploadLoading:false,
      search:'',
      addDialogVisible:false,
      importDialogVisible:false,
      activeName:'batch',
      form:{
        id:'',
        name:'',
        stuId:'',
        college:'',
        major:'',
        stuClass:'',
        phone:'',
        enrollmentYear:'',
        graduationYear:'',
        enable:'',
      }
    }
  },
  computed:{
    filterData(){
      return this.tableData.filter((data) => {
        return !this.search || data.name!=null&&(data.name.toLowerCase().includes(this.search.toLowerCase())||data.name.toLowerCase().includes(this.search.toLowerCase()))||data.id===this.search;
      });
    },
    studentDataFilter(){
      return this.importData.filter((data,index) => {
        return data.right&&index>=((this.currentPage-1)*10)&&index<this.currentPage*10;
      });
    }
  },
  methods : {
    disabledYear(year){
      return year.getTime()<this.form.enrollmentYear;
    },
    change(file) {
      this.file = URL.createObjectURL(file.raw);
      this.extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      this.studentData = file.raw;
      console.log(this.studentData);
    },
    upload() {
      if (this.studentData === '') {
        ElMessage.error("请上传excel文件");
        return;
      }
      if(this.studentData.size>1048*10){
        ElMessage.error("文件大小不能超过10M");
        return;
      }
      this.isLoading = true;
      const formData = new FormData();
      formData.append("studentData", this.studentData);
      this.$http.post("/user/userManager/read/student/data", formData).then((response) => {
        this.uploadLoading = false;
        if (response.data.code === 200) {
          this.file = "";
          this.extension = "";
          this.importDialogVisible=true;
          this.dataId=response.data.data.dataId;
          this.importData=response.data.data.data;
          this.addDialogVisible=false;
          ElMessage.success({message: "读取成功！已筛选非重复数据",type: "success"});
        } else {
          ElMessage.error(response.data.msg);
        }
        this.isLoading = false;
      });
    },
    importStudentData(){
      this.$http.get("/user/userManager/import/student/data?uniId="+this.tempUniId+"&id="+this.dataId).then((response) => {
        if (response.data.code === 200) {
          this.file = "";
          this.extension = "";
          this.importDialogVisible=true;
          // this.dataId=response.data.data.dataId;
          // this.importData=response.data.data.data;
          // this.importDialogVisible=false;
          ElMessage.success({message: "导入成功！",type: "success"});
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    },
    create(){
      this.form.uniId=this.tempUniId;
      this.form.enrollmentYear=moment(this.form.enrollmentYear).format('YYYY');
      this.form.graduationYear=moment(this.form.graduationYear).format('YYYY');
      this.$http.put("/user/userManager/create/student",this.form).then((response) => {
        if (response.data.code === 200) {
          this.addDialogVisible=false;
          this.$message({message: "创建成功！",type: "success"});
        } else {
          this.$message.error(response.data.msg);
        }
      });
    },
    disableAccount(id,enable){
      let data=new FormData();
      data.append("targetId",id);
      this.$http.put(enable===0?"/user/userManager/user/enable":"/user/userManager/user/disable",data)
          .then((response) => {
            if(response.data.code===200){
              ElMessage({ message: response.data.msg, type: 'success' });
              this.initTable();
            }
            else {
              ElMessage.error(response.data.msg);
            }
          });
    },
    resetPassword(id){
      let data=new FormData();
      data.append("targetId",id);
      this.$http.put("/user/userManager/reset/user/password",data)
        .then((response) => {
          if(response.data.code===200){
            ElMessage({ message: response.data.data, type: 'success' });
          }
          else {
            ElMessage.error(response.data.msg);
          }
        });
    },
    openAddDialog(){
      this.form={
        id:'',
        name:'',
        stuId:'',
        college:'',
        major:'',
        stuClass:'',
        phone:'',
        enrollmentYear:'',
        graduationYear:'',
        enable:''
      }
      this.tempUniId=this.currentUniId;
      this.addDialogVisible=true;
    },
    initCollege(){
      this.$http.get("/user/university/college/list?uniId="+this.currentUniId)
          .then((resp)=>{
        if(resp.data.code===200){
          this.collegeList=resp.data.data;
          this.currentCollege=resp.data.data[0];
          this.initTable();
        }
      })
    },
    initUniversity(){
      this.tableLoading=true;
      this.currentUniId=localStorage.getItem("uniId");
      this.uniName=localStorage.getItem("uniName");
      this.initCollege(this.currentUniId);
      this.tableLoading=false;
    },
    initTable(){
      this.tableLoading=true;
      this.$http.get("/user/userManager/select/student?uniId="+this.currentUniId+"&college="+this.currentCollege+"&page="+this.current+"&size=12&sortFieId=id&isASC=true").then((response) => {
        console.log(response);
        if(response.data.code===200){
          this.tableData=response.data.data.records;
          this.pageCount=response.data.data.pages;
          for(let i=0;i<this.tableData.length;i++){
            this.tableData[i].enableDate=moment(this.tableData[i].enableDate).format('YYYY-MM-DD');
            this.tableData[i].disableDate=moment(this.tableData[i].disableDate).format('YYYY-MM-DD');
          }
          this.tableLoading=false;
        }
      });
      this.tableLoading=false;
    }
  },
  mounted(){
    this.initUniversity();
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  height: 94%;
}
.upload_div {
  margin-bottom: 20px;
  width: 114px;
}
</style>